<template>
  <div>
    <div class="ef-node-form">
      <div class="ef-node-form-header">
        编辑
      </div>
      <div class="ef-node-form-body">
        <ng-form-build ref="formBuild" :models="models"  :formTemplate="form" />

        <div style="text-align: right;">
          <el-button @click="inputParam">入参配置</el-button>
        </div>
        <el-divider></el-divider>
        <div style="text-align: right;">
          <el-button type="primary" size="mini" @click="dataFormSubmit()">提交</el-button>
        </div>

      </div>
      <!--            <div class="el-node-form-tag"></div>-->
    </div>
    <InputFieldMapModal ref="InputFieldMap" @data-to-parent="handleDataFromChild"></InputFieldMapModal>
  </div>

</template>

<script>
import { cloneDeep } from 'lodash'
import { saveNode, getNodeInfoByNodeId } from '@/api/apiDs'
import InputFieldMapModal from '@views/dscloud/taskFlow/components/ef/InputFieldMap.vue'

export default {
  components: { InputFieldMapModal },
  data() {
    return {
      nodeId: '',
      compCode: '',
      flowId: '',
      fieldMapJson: [],
      layout: {},
      models: {},
      form: {
        'list': [],
        'config': {
          'labelPosition': 'left',
          'labelWidth': 100,
          'size': 'mini',
          'outputHidden': true,
          'hideRequiredMark': false,
          'syncLabelRequired': false,
          'customStyle': ''
        }
      },
      options: {},
      rules: {},
      visible: true,
      // node 或 line
      type: 'node',
      node: {},
      line: {},
      data: {},
      stateList: [{
        state: 'success',
        label: '成功'
      }, {
        state: 'warning',
        label: '警告'
      }, {
        state: 'error',
        label: '错误'
      }, {
        state: 'running',
        label: '运行中'
      }]
    }
  },
  mounted() {
  },
  methods: {
    /**
     * 表单修改，这里可以根据传入的ID进行业务信息获取
     * @param data
     * @param id
     */
    nodeInit(data, id, flowId) {
      this.models = {}
      this.fieldMapJson = ''
      this.type = 'node'
      this.data = data
      this.nodeId = id //本次点击的节点id
      this.flowId = flowId //流程会话id
      data.nodeList.filter((node) => {
        if (node.id === id) {
          this.node = cloneDeep(node)
          this.form = JSON.parse(this.node.configJson)//组件的表单配置JSON
          this.compCode = node.code
        }
      })

      //获取这个
      const params = {
        flowNodeId: id
      }
      getNodeInfoByNodeId(params).then(res => {
        if (res.success) {
          if (res.result != null) {
            this.models = JSON.parse(res.result.nodeConfigVal)
            this.fieldMapJson = res.result.fieldMap
          }
        } else {
          this.$warning('查询失败')
        }
      })
    },
    lineInit(line) {
      this.type = 'line'
      this.line = line
    },
    // 修改连线
    saveLine() {
      this.$emit('setLineLabel', this.line.from, this.line.to, this.line.label)
    },
    dataFormSubmit() {
      this.$refs.formBuild.getData(false).then((data) => {
        this.models = data
        const params = {
          flowNodeId: this.nodeId,
          nodeConfigValue: JSON.stringify(data),
          compCode: this.compCode,
          flowId: this.flowId
        }
        saveNode(params).then(res => {
          if (res.success) {
            this.$message.success('保存成功')
          } else {
            this.$message.warning('保存失败')
          }
        })
      }).catch(() => {
        this.$message.warning('效验未通过')
      })
      /*this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            flowNodeId: this.nodeId,
            nodeConfigValue : JSON.stringify(this.models),
            compCode: this.compCode,
            flowId: this.flowId
          }
          saveNode(params).then(res => {
            if (res.success) {
              this.$success("保存成功")
            } else {
              this.$warning("保存失败")
            }
          })
        } else {
          return false;
        }
      })*/
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    save() {
      this.data.nodeList.filter((node) => {
        if (node.id === this.node.id) {
          node.name = this.node.name
          node.left = this.node.left
          node.top = this.node.top
          node.ico = this.node.ico
          node.state = this.node.state
          this.$emit('repaintEverything')
        }
      })
    },
    inputParam() {
      this.$refs.InputFieldMap.showTable(this.nodeId, this.fieldMapJson)
    },
    //子组件的字段映射传到父组件
    handleDataFromChild(data) {
      this.fieldMapJson = data
    },
    ds() {
      alert('1111')
    },
    checkSql(){
      alert("22222")
    }
  }
}
</script>

<style>
.el-node-form-tag {
  position: absolute;
  top: 50%;
  margin-left: -15px;
  height: 40px;
  width: 15px;
  background-color: #fbfbfb;
  border: 1px solid rgb(220, 227, 232);
  border-right: none;
  z-index: 0;
}
</style>
